<%--
  Created by IntelliJ IDEA.
  User: wyp
  Date: 2020/5/11
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--引入JQuery，必须要在bootstrap.js之前引入-->
    <script type="text/javascript" src="./resources/js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="./resources/css/font.css">
    <link rel="stylesheet" href="./resources/css/xadmin.css">
    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script src="./resources/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./resources/js/xadmin.js"></script>
    <title>景点列表</title>
</head>
<script>
    //获取地址栏参数//可以是中文参数
    function getUrlParam(key) {
        // 获取参数
        var url = window.location.search;
        // 正则筛选地址栏
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        // 匹配目标参数
        var result = url.substr(1).match(reg);
        //返回参数值
        return result ? decodeURIComponent(result[2]) : null;
    }

    //按钮查找事件：按钮type为submit会自动刷新页面
    function searchClick(){
        //发异步，把数据提交给servlet
        var searchName = $('#searchName').val();
        console.log(searchName);
        $.ajax({
            type:"POST",
            data:{"method":"allSpot","searchName":searchName},
            url:"./spotController",
            dataType:"json",
            success:function (data) {
                console.log("success:"+data);
                outSpot(data);
            },
            error:function(data){
                console.log("error:"+data);
            }
        });
        return false;
    };


    $(document).ready(function () {
        console.log("页面载入时！");
        var page = 1;//默认当前页为11
        var pageSize = 5 ; //默认页大小5
        SpotPager(page,pageSize);
    });

    //景点分页
    function SpotPager(page,pageSize) {
        $.ajax({
            type: "POST",
            dataType: "json",
            data:{"method":"allSpot","page":page,"pageSize":pageSize},
            url:"./spotController",
            success:function (data) {
                outSpot (data);
            }
        });
        return false;
    };

    //输出景点
    function outSpot(data){
        var result = "";
        for(var i = 0;i<data["data"].length;i++){
            result+="<tr>";
            // result+="<td><input type=\"checkbox\" name=\"id\" value="+data["data"][i].spotId+"   lay-skin=\"primary\"> </td>";
            result+="<td>"+data["data"][i].spotId+"</td>";
            result+="<td>"+data["data"][i].spotName+"</td>";
            result+="<td>"+data["data"][i].spotPlace+"</td>";
            result+="<td>"+data["data"][i].spotItem+"</td>";
            result+="<td>"+data["data"][i].spotPrice+"</td>";
            result+="<td>"+data["data"][i].spotOpenTime+"</td>";
            result+="<td><img src='./"+data["data"][i].spotImgUrl+"'></td>";
            result+="<td class='td-manage'>" +
                "<a title=\"编辑\"  onclick=\"xadmin.open('编辑','./spotController?method=spotById&spotId="+data["data"][i].spotId+"',600,450)\" href=\"javascript:;\">"
                +"<i class=\"layui-icon\">&#xe642;</i>"+"</a>"
                +"<a title=\"删除\" onclick=\"spot_del(this,"+data["data"][i].spotId+",'"+data["data"][i].spotImgUrl+"')\"  href=\"javascript:;\">"
                +"<i class=\"layui-icon\">&#xe640;</i>"+"</a>"
                +"</td>";
            result+="</tr>";
        }
        $("#mytbody").html(result);

        /*分页*/
        //字符串存储html文本
        var pagerL ="";
        //当前页
        var nowPage = data["page"];
        for(var i = 1;i<=data["pages"];i++){
            if(i===nowPage){
                pagerL+="<span class=\"current\">"+i+"</span>"
            }else {
                pagerL+="<a class=\"num\" href=\"javascript:SpotPager("+i+")\">"+i+"</a>";
            }
        }
        $("#pagerList").html("<a class=\"prev\" href=\"javascript:SpotPager(1)\" >&lt;&lt;</a>"
            +pagerL+
            "<a id=\"lastPage\" class=\"next\" href=\"javascript:SpotPager("+data["pages"]+")\">&gt;&gt;</a>");

    };
</script>
<body>

<div class="x-nav">
    <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">景点信息管理</a>
            <a>
              <cite>景点列表</cite>
            </a>
    </span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
</a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <%--搜索--%>
                <div class="layui-card-body " style="margin:0 auto;text-align: center;">
                    <form class="layui-form layui-col-space5" method="post" action="#">


                        <div class="layui-input-inline layui-show-xs-block">
                            <input type="text" id="searchName" name="searchName" placeholder="请输入景点名称" autocomplete="off" class="layui-input"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn" type="button"  lay-filter="searchSpotName" onclick="searchClick()" >
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>


                    </form>
                </div>

                <div class="layui-card-header">
<%--                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>--%>
                    <button class="layui-btn" onclick="xadmin.open('添加景点','./spotController?method=spotAdd',500,530)"><i class="layui-icon"></i>添加</button>

                    <div class="layui-inline layui-show-xs-block">
                        <%--这里要给button加type=button--%>
                        <button class="layui-btn" title="打印所有景点" type="button" lay-submit="" lay-filter="" onclick="window.location.href='./download?method=downSpot'" >
                            <i class="layui-icon">&#xe67d;</i></button>
                    </div>
                </div>



                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>景点</th>
                            <th>地址</th>
                            <th>游览项目</th>
                            <th>价格</th>
                            <th>开放时间</th>
                            <th>图片地址</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="mytbody"></tbody>
                    </table>
                </div>
                <div class="layui-card-body ">
                    <div class="page">
                        <div id="pagerList">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    /*景点-删除*/
    function spot_del(obj,spotId,imgUrl){

        //发异步删除数据
        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                type:"POST",
                url:"./spotController?method=spotDel&delspotId="+spotId+"&imgUrl="+imgUrl ,
                dataType:"json",
                success:function (data) {
                    layer.alert("删除成功",{icon:6},function () {
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!',{icon:1,time:1000});
                        // xadmin.close();
                    });
                },
                error:function (data) {
                    layer.alert("删除失败",{icon:6},function () {
                        xadmin.close();
                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
                }
            });

        });
    }
</script>
</body>
</html>
